<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 禾行通</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .status-bar {
            background: linear-gradient(45deg, #28a745, #20c997);
            color: white;
            padding: 1rem 0;
        }
        .data-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            padding: 1.5rem;
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }
        .data-card:hover {
            transform: translateY(-5px);
        }
        .quick-entry {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            text-align: center;
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .quick-entry:hover {
            transform: translateY(-5px);
            color: inherit;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        .quick-entry i {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .emergency-btn {
            background: linear-gradient(45deg, #dc3545, #c82333);
            border: none;
            border-radius: 50px;
            color: white;
            font-weight: bold;
            padding: 15px 30px;
            font-size: 1.1rem;
            box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
        }
        .emergency-btn:hover {
            background: linear-gradient(45deg, #c82333, #bd2130);
            color: white;
        }
        .dynamic-card {
            background: white;
            border-radius: 15px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #dee2e6;
            padding: 0.5rem 0;
            z-index: 1000;
        }
        .nav-item {
            text-align: center;
            color: #6c757d;
            text-decoration: none;
            padding: 0.5rem;
            transition: color 0.3s ease;
        }
        .nav-item.active {
            color: #28a745;
        }
        .nav-item:hover {
            color: #28a745;
        }
        .badge-notification {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #dc3545;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .weather-info {
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
            padding: 0.5rem 1rem;
        }
        .progress-ring {
            transform: rotate(-90deg);
        }
        .progress-ring-circle {
            transition: stroke-dasharray 0.35s;
            transform-origin: 50% 50%;
        }
    </style>
</head>
<body>
    <!-- 顶部状态栏 -->
    <div class="status-bar">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-user-circle me-2"></i>
                        <div>
                            <div class="fw-bold">张三农户</div>
                            <small>绿野农场</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="weather-info">
                        <i class="fas fa-sun me-2"></i>
                        <span>晴天 25°C</span>
                        <span class="ms-2">湿度 65%</span>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <div class="position-relative d-inline-block">
                        <i class="fas fa-bell fa-lg"></i>
                        <span class="badge-notification">3</span>
                    </div>
                    <span class="ms-3">消息通知</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container mt-4 pb-5">
        <!-- 核心数据卡片 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="data-card text-center">
                    <h3 class="text-success mb-2">3/5</h3>
                    <p class="mb-2">在线农机数</p>
                    <a href="/vehicles" class="btn btn-outline-success btn-sm">查看详情</a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="data-card text-center">
                    <div class="position-relative d-inline-block mb-2">
                        <svg class="progress-ring" width="80" height="80">
                            <circle class="progress-ring-circle" stroke="#28a745" stroke-width="6" fill="transparent" r="35" cx="40" cy="40" stroke-dasharray="127.17 127.17" stroke-dashoffset="49.57"/>
                        </svg>
                        <div class="position-absolute top-50 start-50 translate-middle">
                            <strong>58%</strong>
                        </div>
                    </div>
                    <p class="mb-2">今日作业进度</p>
                    <small class="text-muted">58亩/100亩</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="data-card text-center">
                    <button class="emergency-btn w-100">
                        <i class="fas fa-stop-circle me-2"></i>
                        紧急停止
                    </button>
                    <small class="text-muted d-block mt-2">全局控制所有设备</small>
                </div>
            </div>
        </div>
        
        <!-- 快捷入口 -->
        <div class="row mb-4">
            <div class="col-12">
                <h5 class="mb-3"><i class="fas fa-th-large me-2"></i>快捷功能</h5>
            </div>
            <div class="col-6 col-md-2 mb-3">
                <a href="/vehicles" class="quick-entry d-block">
                    <i class="fas fa-tractor text-primary"></i>
                    <div class="fw-bold">设备管理</div>
                    <small class="text-muted">农机状态</small>
                </a>
            </div>
            <div class="col-6 col-md-2 mb-3">
                <a href="/fields" class="quick-entry d-block">
                    <i class="fas fa-seedling text-success"></i>
                    <div class="fw-bold">田地管理</div>
                    <small class="text-muted">地图划区</small>
                </a>
            </div>
            <div class="col-6 col-md-2 mb-3">
                <a href="/tasks" class="quick-entry d-block">
                    <i class="fas fa-tasks text-warning"></i>
                    <div class="fw-bold">任务下发</div>
                    <small class="text-muted">作业任务</small>
                </a>
            </div>
            <div class="col-6 col-md-2 mb-3">
                <a href="/community" class="quick-entry d-block">
                    <i class="fas fa-users text-info"></i>
                    <div class="fw-bold">农友圈</div>
                    <small class="text-muted">行业动态</small>
                </a>
            </div>
            <div class="col-6 col-md-2 mb-3">
                <a href="/forum" class="quick-entry d-block">
                    <i class="fas fa-comments text-secondary"></i>
                    <div class="fw-bold">交流区</div>
                    <small class="text-muted">问答求助</small>
                </a>
            </div>
        </div>
        
        <!-- 农友圈动态流 -->
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5><i class="fas fa-newspaper me-2"></i>农友圈动态</h5>
                    <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#postModal">
                        <i class="fas fa-plus me-1"></i>发布动态
                    </button>
                </div>
                
                <!-- 置顶公告 -->
                <div class="dynamic-card border-start border-warning border-4">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-bullhorn text-warning me-2"></i>
                        <strong class="text-warning">置顶公告</strong>
                        <span class="badge bg-warning ms-2">官方</span>
                    </div>
                    <h6>关于春季农机维护保养的重要通知</h6>
                    <p class="text-muted mb-2">各位农户朋友，春耕在即，请及时对农机设备进行全面检查和维护保养，确保春耕作业顺利进行...</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">农业部门 · 2小时前</small>
                        <div>
                            <button class="btn btn-sm btn-outline-primary me-2">
                                <i class="fas fa-thumbs-up"></i> 128
                            </button>
                            <button class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-comment"></i> 23
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 农户动态 -->
                <div class="dynamic-card">
                    <div class="d-flex align-items-center mb-2">
                        <img src="https://via.placeholder.com/40" class="rounded-circle me-2" alt="头像">
                        <div>
                            <strong>李四农户</strong>
                            <small class="text-muted d-block">丰收农场</small>
                        </div>
                    </div>
                    <p>今年的小麦长势真不错！感谢禾行通系统的精准管理，预计亩产能达到600公斤 🌾</p>
                    <div class="row mb-2">
                        <div class="col-4">
                            <img src="https://via.placeholder.com/150x100" class="img-fluid rounded" alt="小麦田">
                        </div>
                        <div class="col-4">
                            <img src="https://via.placeholder.com/150x100" class="img-fluid rounded" alt="小麦田">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">5小时前</small>
                        <div>
                            <button class="btn btn-sm btn-outline-primary me-2">
                                <i class="fas fa-thumbs-up"></i> 45
                            </button>
                            <button class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-comment"></i> 12
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 农业知识 -->
                <div class="dynamic-card border-start border-info border-4">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-lightbulb text-info me-2"></i>
                        <strong class="text-info">农业知识</strong>
                        <span class="badge bg-info ms-2">推荐</span>
                    </div>
                    <h6>春季玉米播种技术要点</h6>
                    <p class="text-muted mb-2">1. 选择优质种子，确保发芽率达到95%以上<br>2. 土壤温度稳定在10°C以上时播种<br>3. 播种深度控制在3-5cm...</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">农技专家 · 1天前</small>
                        <div>
                            <button class="btn btn-sm btn-outline-primary me-2">
                                <i class="fas fa-thumbs-up"></i> 89
                            </button>
                            <button class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-comment"></i> 34
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="bottom-nav">
        <div class="container">
            <div class="row">
                <div class="col-3">
                    <a href="/dashboard" class="nav-item active d-block">
                        <i class="fas fa-home d-block"></i>
                        <small>首页</small>
                    </a>
                </div>
                <div class="col-3">
                    <a href="/community" class="nav-item d-block">
                        <i class="fas fa-users d-block"></i>
                        <small>农友圈</small>
                    </a>
                </div>
                <div class="col-3">
                    <a href="/messages" class="nav-item d-block position-relative">
                        <i class="fas fa-envelope d-block"></i>
                        <small>消息</small>
                        <span class="badge-notification">3</span>
                    </a>
                </div>
                <div class="col-3">
                    <a href="/profile" class="nav-item d-block">
                        <i class="fas fa-user d-block"></i>
                        <small>我的</small>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 发布动态模态框 -->
    <div class="modal fade" id="postModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-edit"></i> 发布动态</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="postForm">
                        <div class="mb-3">
                            <textarea class="form-control" id="postContent" rows="4" placeholder="分享你的农场生活..." required></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">添加图片</label>
                            <input type="file" class="form-control" id="postImages" multiple accept="image/*">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">话题标签</label>
                            <div class="d-flex flex-wrap gap-2">
                                <button type="button" class="btn btn-outline-secondary btn-sm topic-tag" data-topic="春耕">#春耕</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm topic-tag" data-topic="丰收">#丰收</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm topic-tag" data-topic="技术分享">#技术分享</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm topic-tag" data-topic="农机维护">#农机维护</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" id="publishBtn">
                        <i class="fas fa-paper-plane"></i> 发布
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 紧急停止按钮
        document.querySelector('.emergency-btn').addEventListener('click', function() {
            if (confirm('确定要紧急停止所有农机设备吗？')) {
                alert('紧急停止指令已发送！');
                // 这里添加实际的紧急停止逻辑
            }
        });
        
        // 话题标签选择
        document.querySelectorAll('.topic-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                this.classList.toggle('btn-outline-secondary');
                this.classList.toggle('btn-secondary');
            });
        });
        
        // 发布动态
        document.getElementById('publishBtn').addEventListener('click', function() {
            const content = document.getElementById('postContent').value;
            const selectedTags = Array.from(document.querySelectorAll('.topic-tag.btn-secondary'))
                .map(tag => tag.dataset.topic);
            
            if (!content.trim()) {
                alert('请输入动态内容');
                return;
            }
            
            console.log('发布动态:', { content, tags: selectedTags });
            alert('动态发布成功！');
            
            // 关闭模态框并重置表单
            const modal = bootstrap.Modal.getInstance(document.getElementById('postModal'));
            modal.hide();
            document.getElementById('postForm').reset();
            
            // 重置标签状态
            document.querySelectorAll('.topic-tag').forEach(tag => {
                tag.classList.remove('btn-secondary');
                tag.classList.add('btn-outline-secondary');
            });
        });
        
        // 实时更新天气信息
        function updateWeather() {
            // 这里可以调用天气API获取实时数据
            console.log('更新天气信息');
        }
        
        // 每30分钟更新一次天气
        setInterval(updateWeather, 30 * 60 * 1000);
        
        // 实时更新农机状态
        function updateVehicleStatus() {
            // 这里可以通过WebSocket或定时请求更新农机状态
            console.log('更新农机状态');
        }
        
        // 每10秒更新一次农机状态
        setInterval(updateVehicleStatus, 10 * 1000);
    </script>
</body>
</html>